import React from "react";

const App = () => {
  let [num, setNum] = React.useState(0);
  let [str, setString] = React.useState("(*^_^*)");
  let [bool, setBool] = React.useState(true);
  let [obj, setObj] = React.useState({
    name: "Thomas",
  });
  let [todos, setTodos] = React.useState([
    {
      id: 1,
      text: "todo 1",
    },
  ]);
  return (
    <div>
      <h1>{num}</h1>
      <h1>{str}</h1>
      <button
        onClick={() => {
          setString("😀");
        }}
      >
        改变string
      </button>

      <h1>{bool}</h1>
      <h1>{obj.name}</h1>
      <div>
        {todos.map((todo) => {
          return <div key={todo.id}>{todo.text}</div>;
        })}
      </div>
      <button
        onClick={() => {
          todos.push({
            id: Date.now(),
            text: "新todo",
          });
          // setTodos(todos);
          setTodos([...todos]);
        }}
      >
        添加一个todos
      </button>
    </div>
  );
};

export default App;
